<template>
  <!-- 资金记录 -->
  <div class="information-content-h5">
    <h1 class="information-content-h5__title">
      <h3 @click="goBack"><i-teenyicons-arrow-left-solid /> {{ title }}</h3>
      <h4 @click="openFilter"><i-tabler-filter-edit />{{ t("RescueFund.text13") }}</h4>
    </h1>

    <ul class="capital-record-h5__list">
      <li v-for="item in list" :key="item.id">
        <h3>
          <dl class="width-reset">
            <span class="capital-record__tit"> {{ t(getEnumValue("capitalRecordType", `${item.type}`)) }}</span>
          </dl>
          <span>{{ parseTime(item.createTime) }}</span>
          <span>{{ t(getEnumValue("capitalRecordStatus", `${item.status}`)) }}</span>
        </h3>
        <h4>
          <span class="capital-record-li width-reset">
            <em>{{item.orderId}}</em>
            <h5>{{t('Transaction.OrderId')}}</h5>
          </span>
          <span class="capital-record-li">
            <em><img :src="item.currencyIcon" alt="">{{item.money}}</em>
            <h5>{{t('Transaction.Amount')}}</h5>
          </span>
          <span class="capital-record-li">
            <em><img :src="item.currencyIcon" alt="">{{item.surplusMoney}}</em>
            <h5>{{t('Transaction.AccountBalance')}}</h5>
          </span>
        </h4>
      </li>
    </ul>
    <!-- 过滤框 -->
    <van-popup
      v-model:show="showBottom"
      position="bottom"
      class="mine-h5-popup"
      :style="{ height: '80%' }"
    >
      <el-form :model="form" ref="passwordFormRef" class="mine-h5-popup-content" size="small">
        <el-form-item class="z-form-item-flex">
          <el-input v-model="form.orderId" placeholder="交易号" />
        </el-form-item>
        <el-form-item class="z-form-item-flex average">
          <el-input v-model="form.startDate" placeholder="Approved by" @focus="showStartDate = true" />
          <el-input v-model="form.endDate" placeholder="Approved by" @focus="showEndDate = true" />
        </el-form-item>
        <el-form-item prop="currencyId">
          <h3 class="h5-popup-title">{{ t('BetRecord.CurrencyName') }} <span :class="{'active': toggle.currency.value}" @click="handleClick('currency')">{{ toggle.currency.more }} <i-iconoir-nav-arrow-down /></span></h3>
          <ZH5Radio v-model:navs="currencyNavs" v-model:toggle="toggle.currency.value" size="small" v-model:active="currencyActive" v-model:value="form.currencyId"/>
        </el-form-item>
        <el-form-item prop="status">
          <h3 class="h5-popup-title">{{t('BetRecord.Status')}} <span :class="{'active': toggle.status.value}" @click="handleClick('status')">{{ toggle.status.more }} <i-iconoir-nav-arrow-down /></span></h3>
          <ZH5Radio v-model:navs="navs" v-model:toggle="toggle.status.value" v-model:active="active" v-model:value="form.status"/>
        </el-form-item>
        <el-form-item prop="type">
          <h3 class="h5-popup-title">{{t('Transaction.type')}} <span :class="{'active': toggle.type.value}" @click="handleClick('type')">{{ toggle.type.more }} <i-iconoir-nav-arrow-down /></span></h3>
          <ZH5Radio v-model:navs="typeNavs" v-model:toggle="toggle.type.value" v-model:active="typeActive" v-model:value="form.type"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="h5-popup-search-button" @click="search">{{t('BetRecord.Search')}}</el-button>
        </el-form-item>
      </el-form>
    </van-popup>
    <!-- startDate -->
    <van-popup
      v-model:show="showStartDate"
      position="bottom"
    >
      <van-date-picker
        v-model="form.startDateHanlder"
        title="选择日期"
        :columns-type="['year', 'month', 'day']"
        :min-date="new Date(2020, 0, 1)"
        :max-date="new Date(2055, 5, 1)"
        @confirm="confirmStartDate"
        @cancel="showStartDate = false"
      />
    </van-popup>
    <!-- endDate -->
    <van-popup
      v-model:show="showEndDate"
      position="bottom"
    >
      <van-date-picker
        v-model="form.endDateHanlder"
        @confirm="confirmEndDate"
        @cancel="showEndDate = false"
        title="选择日期"
        :columns-type="['year', 'month', 'day']"
        :min-date="new Date(2020, 0, 1)"
        :max-date="new Date(2055, 5, 1)"
      />
    </van-popup>
  </div>
</template>

<script setup lang="ts" name="CapitalRecordH5">
import recordApi from '@/api/modules/record';
import nocache from '@/store/nocache';
import userinfo from '@/store/userinfo';
import { getEnumValue, getEnumOptions } from '@/utils/enums';
import { parseTime } from '@/utils/format';

const { t } = useI18n();
const emits = defineEmits(['back']);
const piniaUserinfo:any = userinfo();
const piniaNocache: any = nocache();
const props = defineProps({
  title: {
    type: String,
    default: ""
  }
});

const startDate = parseTime(new Date().getTime() - 3600 * 1000 * 24 * 7, 'dateobject');
const endDate = parseTime(new Date(), 'dateobject');

const data:any = reactive({
  showBottom: false,
  showStartDate: false,
  showEndDate: false,
  form: {
    timeType: '1',
    status: "",
    type: "",
    startDate: `${startDate.y}-${startDate.m}-${startDate.d}`,
    endDate: `${endDate.y}-${endDate.m}-${endDate.d}`,
    startDateHanlder: [startDate.y, startDate.m, startDate.d],
    endDateHanlder: [endDate.y, endDate.m, endDate.d],
  },
  navs: getEnumOptions('capitalRecordStatus'),
  active: '',
  typeNavs: getEnumOptions('capitalRecordType'),
  typeActive: '',
  currencyNavs: computed(()=>{
    return piniaUserinfo.getWallet.map((im:any)=>{
      return {
        ...im,
        label: im.currencyName,
        active: im.currencyId,
        value: im.currencyId
      }
    })
  }),
  currencyActive: piniaUserinfo.getCurrentWallet.currencyId,
  list: [],
  toggle: {
    currency: {
      more: t("home.more"),
      value: true
    },
    status: {
      more: t("home.more"),
      value: true
    },
    type: {
      more: t("home.more"),
      value: true
    },
  },
});

const {
  showBottom,
  showStartDate,
  showEndDate,
  form,
  navs,
  active,
  currencyNavs,
  currencyActive,
  list,
  typeNavs,
  typeActive,
  toggle,
} = toRefs(data);

// 顶顶顶----
const openFilter = () => {
  showBottom.value = true;
}


// 搜索
const search = () => {
  showBottom.value = false;
  piniaNocache.setLoading(true);
  recordApi.playGoldRecord({
    orderId: form.value.orderId,
    type: form.value.type,
    pageSize: 1,
    pageNum: 9999,
    currencyId: form.value.currencyId,
    startTime: form.value.startDate + ' 00:00:00',
    endTime: form.value.endDate + ' 23:59:59',
    status: form.value.status,
    userId: piniaUserinfo.getUserinfo.user.id,
  }).then((response:any)=>{
    if(response.code === 200){
      list.value = response.rows || [];
      console.log("资金记录", response.rows ,list.value)
    }
  }).finally(()=>{
    piniaNocache.setLoading(false);
  });
}
search();

// 时间选择
const confirmStartDate = ({selectedValues}: any) => {
  form.value.startDate = selectedValues.join('-');
  showStartDate.value = false;
}

// 时间选择
const confirmEndDate = ({selectedValues}: any) => {
  form.value.endDate = selectedValues.join('-');
  showEndDate.value = false;
}

// --
const handleClick = (type: string) => {
  toggle.value[type].value = !toggle.value[type].value;
  toggle.value[type].more = toggle.value[type].value ? t("home.more") : t('Transaction.PutWay');
}

const goBack = () => {
  emits('back');
}
</script>

<style lang="scss" scoped>
@import url(./index.scss);
.capital-record-tab{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  &>div{
    width: 47%;
    height: var(--rem-40);
    font-size: var(--rem-13);
    font-weight: 700;
    line-height: var(--rem-40);
    text-align: center;
    border-radius: var(--rem-20);
    box-sizing: border-box;
    &.active{
      background-color: var(--z-bg-btn);
      color: var(--z-font-white);
    }
  }
}
.capital-record-h5__header{
  background: url(../../assets/images/me/record.png) no-repeat;
  background-size: cover;
  height: var(--rem-80);
  margin: 0 var(--rem-14) 0;
  display: flex;
  justify-content: space-between;
  margin-top: var(--rem-20);
  align-items: center;
  &>div{
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    span{
      font-weight: 700;
      font-size: var(--rem-16);
      color: #fff;
    }
    em{
      margin-top: var(--rem-6);
      font-weight: 500;
      font-size: var(--rem-11);
      font-style: normal;
      opacity: .6;
      color: #fff;
    }
  }
}
.capital-record-h5__checkbox{
  margin: var(--rem-20) var(--rem-14) 0;
}
.capital-record-h5__list{
  padding: var(--rem-20) var(--rem-14) 0;
  .width-reset{
    width: var(--rem-100);
    text-align: left;
    em{
      text-align: left;
      word-break: break-all;
    }
    h5{
      width: 100%;
    }
  }
  li{
    width: 100%;
    padding: var(--rem-16) var(--rem-10);
    box-sizing: border-box;
    background-color: var(--z-bg-card);
    border-radius: var(--rem-12) var(--rem-12) 0 0/var(--rem-12) var(--rem-12) 0 0;
    h3{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      font-size: var(--rem-12);
      text-align: center;
      padding-bottom: var(--rem-14);
      border-bottom: 1px solid var(--border-color);
      dl{
        display: flex;
        align-items: center;
        em{
          width: var(--rem-30);
          height: var(--rem-30);
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: var(--bg-table-header-h5);
          border-radius: var(--rem-8);
          display: flex;
          justify-content: center;
          align-items: center;
          img{
            width: var(--rem-20);
            height: var(--rem-18);
          }
        }
        span.capital-record__tit{
          width: var(--rem-50);
          text-overflow: ellipsis;
          overflow: hidden;
          margin-left: var(--rem-5);
          white-space: nowrap;
        }
      }
    }
    h4{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--rem-20) 0 var(--rem-10);
      h5{
        font-weight: 500;
        font-size: var(--rem-11);
        margin-top: var(--rem-10);
        color: var(--z-font-def);
      }
      .capital-record-li{
        display: flex;
        flex-direction: column;
        align-items: center;
        &.brl{
          img{
            width: var(--rem-20);
            height: var(--rem-20);
          }
        }
        em{
          display: flex;
          align-items: center;
          justify-content: center;
          font-style: normal;
        }
        img{
          width: var(--rem-15);
          height: var(--rem-15);
          border-radius: 100%;
          margin-right: var(--rem-5);
        }
        font-weight: 700;
        font-size: var(--rem-13);
        color: var(--z-font-anti);
      }
    }
  }
}
</style>
